<template>
  <div class="white-box container-fluid">
    <div class="row justify-content-center">
      <div class="col-10 title">
        <p>商城系统产品</p>
        <p>为企业商家打造出如B2B商城、B2C商城、B2B2C商城、跨境电商、批发商城等一系列满足广泛业务需求的商城系统产品服务</p>
      </div>
      <div class="col-10">
        <el-card class="box-card">
          <!-- 板块内容 -->
          <div class="row justify-content-around info-box">
            <div class="mainBox col-md-3 col-10">
              <p>B2B供应链系统</p>
              <p>
                供应商管理、金融、物流、订单、支付、电子合同、
                大数据等功能打造闭环供应链平台
              </p>
            </div>
            <div class="imgBox col-md-5 col-10">
              <img src="http://cereshop.oss-cn-shenzhen.aliyuncs.com/0000/2020/08/339bb6c4-ee1a-4203-853c-a27a64f2751f.png" />
            </div>
          </div>
          <!-- 导航条 -->
          <div class="row justify-content-between nav">
            <div class="col-md-3 col-5 nav-item">
              B2B供应链系统
            </div>
            <div class="col-md-3 col-5 nav-item">
              B2C独立商城系统
            </div>
            <div class="col-md-3 col-5 nav-item">
              B2B2C商城系统
            </div>

            <div class="col-md-3 col-5 nav-item">
              大数据平台系统
            </div>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
export default {

}
</script>

<style lang="less" scoped>
.white-box {
  padding: 6.19rem 0;
  .title {
    p {
      text-align: center;
      padding-bottom: 3.75rem;
    }
    p:nth-child(1) {
      font-size: 3rem;
      font-weight: 500;
      color: rgba(51, 51, 51, 1);
    }
    p:nth-child(2) {
      font-size: 1.13rem;
      font-weight: 400;
      color: rgba(102, 102, 102, 1);
    }
  }
  .box-card {
    padding: 5rem 0;
    .info-box {
      display: flex;
      align-items: center;
      .mainBox {
        p {
          padding: 2rem 0;
        }
        p:nth-child(1) {
          font-size: 2.25rem;
          font-weight: 500;
        }
        p:nth-child(2) {
          font-size: 1.13rem;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
        }
      }
      .imgBox {
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img {
          width: 80%;
        }
      }
    }

    .nav {
      margin-top: 5rem;
      .nav-item {
        transition: all 0.5s;
        cursor: pointer;
        text-align: center;
        padding: 1rem 0;
      }
      .nav-item:hover {
        color: #5ccfda;
      }
    }
  }

  .item {
    cursor: pointer;
    // padding: 5.6rem 9.6rem;
    height: 18.75rem;
    background: #ffffff;
    margin-top: 1rem;
    border: 0.1rem solid rgba(244, 244, 244, 1);
    display: flex;
    align-items: center;
    .item-box {
      cursor: pointer;
      display: flex;
      align-items: center;
      text-align: center;
      img {
        width: 50%;
      }
      .info {
        font-size: 1.5rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
      }
    }
    .item-box-float {
      transition: all 0.5s;
      cursor: pointer;
      position: absolute;
      left: 0;
      height: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      overflow: hidden;
      // background-color: red;
      background: rgba(255, 255, 255, 1);
      box-shadow: 0rem 0rem 1rem 0rem rgba(0, 0, 0, 0.19);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      .imgBox {
        width: 4.38rem;
        height: 4.38rem;
        // display: flex;
        img {
          width: 100%;
          height: 100%;
        }
      }
      p {
        // text-align: center;
        padding: 0 2rem;
      }
      .title {
        padding-top: 1rem !important ;
        font-size: 1.5rem;
        font-family: PingFang SC;
        font-weight: 500;
        color: rgba(51, 51, 51, 1);
        p {
          margin: 0 0;
          padding: 0 0;
        }
      }
      .info {
        font-size: 1rem;
        font-family: PingFang SC;
        font-weight: 400;
        color: rgba(102, 102, 102, 1);
      }
    }
  }
  // .item:hover{
  //   .item-box-float{
  //     width: 100%!important;
  //     height: 100%!important;
  //   }
  // }
}
</style>